<script setup>
const menuItems = [
  {
    title: '首页',
    path: '/dashboard',
    icon: 'HomeFilled'
  },
  {
    title: '商品管理',
    path: '/commodity',
    icon: 'Goods'
  },
  {
    title: '用户管理',
    path: '/users',
    icon: 'User'
  },
  {
    title: '订单管理',
    path: '/orders',
    icon: 'List'
  },
  {
    title: '订单详情管理',
    path: '/order-details',
    icon: 'Document'
  }
]
</script>

<template>
  <el-aside class="sidebar">
    <el-menu
      default-active="/dashboard"
      class="el-menu-vertical"
      :router="true"
      background-color="#304156"
      text-color="#fff"
      active-text-color="#409EFF"
    >
      <el-menu-item v-for="item in menuItems" :key="item.path" :index="item.path">
        <el-icon><component :is="item.icon" /></el-icon>
        <span>{{ item.title }}</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<style scoped>
.sidebar {
  position: fixed;
  left: 0;
  top: 50px; /* 为顶部标题栏留出空间 */
  bottom: 0;
  width: 15%;
  background-color: #304156;
  color: #fff;
  z-index: 1000;
}

.logo-container {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  overflow: hidden;
  background-color: #2b3a4a;
}

.el-menu-vertical {
  border-right: none;
}

:deep(.el-menu) {
  border-right: none;
}
</style> 